<template>
  <!-- 执行中 -->
  <div>
    <div
      style="
        display: flex;
        align-items: center;
        font-size: 14px;
        margin: 0 20px;
      "
    >
      <div>终版配包：{{ finalfile.fileName }}</div>
      <div style="margin-left: 20px">
        <FileDownloader
          :fileUrl="finalfile.filePath"
          :fileName="finalfile.fileName"
        />
      </div>
    </div>

    <div
      style="
        display: flex;
        align-items: center;
        font-size: 14px;
        margin: 0 20px;
      "
    >
      <div>终版合同：{{ finalfile2.fileName }}</div>
      <div style="margin-left: 20px">
        <FileDownloader
          :fileUrl="finalfile2.filePath"
          :fileName="finalfile2.fileName"
        />
      </div>
    </div>

    <div style="margin-left: 20px;">
      <el-button v-if="operationList.includes('project:completeExecute')" @click="zhixingwan">执行完</el-button>
    </div>

    <el-dialog title="执行完" :visible.sync="dialogzhixingwan" width="60%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="完成时间">
          <el-date-picker
            v-model="form.executeTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="实际成本">
          <el-input-number
            v-model="form.actualCost"
            @change="handleChange"
            :precision="2"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogzhixingwan = false">取 消</el-button>
        <el-button type="primary" @click="handsurezhixingwan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import APIdetail from "@/api/apidetail";
import FileDownloader from "@/components/utils/FileDownloader";
export default {
  props:['operationList'],
  components: {
    FileDownloader,
  },
  data() {
    return {
      projectId: null,
      finalfile: { filePath: "", fileName: "" },
      finalfile2: { filePath: "", fileName: "" },
      dialogzhixingwan: false,
      form: {
        actualCost: "",
        executeTime: Date.now(),
      },
    };
  },

  methods: {
    handzhixing() {
      let params = {
        projectId: this.projectId,
      };
      APIdetail.startExecute(params).then((res) => {
        if (res.key == 1000) {
          this.$message.success(res.message);
          this.$emit("get-stage");
        }
      });
    },
    //获取终版文件
    getFinalFile() {
      let params = {
        fileType: 5123,
        projectId: this.projectId,
      };
      APIdetail.getFinalFile(params).then((res) => {
        if (res.key == 1000) {
          this.finalfile = res.result.data;
        }
      });
    },
    getFinalFile2() {
      let params = {
        fileType: 5089,
        projectId: this.projectId,
      };
      APIdetail.getFinalFile(params).then((res) => {
        if (res.key == 1000) {
          this.finalfile2 = res.result.data;
        }
      });
    },

    zhixingwan() {
      this.form = {
        actualCost: "",
        executeTime: Date.now(),
      };
      this.dialogzhixingwan = true;
    },
    handleChange() {},
    handsurezhixingwan() {
      const params = this.form;
      params.projectId = this.projectId;
      APIdetail.completeExecute(params).then((res) => {
       if(res.key == 1000){
        this.$message.success(res.message);
        this.$emit('get-stage')
       }
      });
    },
  },

  created() {
    let projectId = this.$ls.get("projectId");
    this.projectId = projectId;
    this.getFinalFile();
    this.getFinalFile2();
  },
};
</script>
